<template>
  <div>
    <div class="menu-div-top"></div>
    <el-menu
      class="slide-menu"
      :unique-opened="true"
      :default-openeds="default_op"
      :default-active="active"
      @select="selected"
    >
      <template v-for="menu in menus">

        <el-submenu
          :index="menu.index"
          v-if="menu.children.length"
          :key="menu.index"
        >
          <template slot="title">
            <ali-icon
              v-if="menu.icon.length"
              :icon="menu.icon"
              color="gray"
            ></ali-icon>
            <span>{{menu.label}}</span>
          </template>
          <template v-for="child in menu.children">
            <el-menu-item
              :index="child.index"
              :key="child.index"
              @click="full(child.isFull)"
            >
              <span>{{child.label}}</span>
            </el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item
          v-bind:index="menu.index"
          :key="menu.index"
          v-else
        >
          <template slot="title">
            <ali-icon
              v-if="menu.icon.length"
              :icon="menu.icon"
              color="gray"
            ></ali-icon>
            <span>{{menu.label}}</span>
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "uMenu",
  data() {
    let default_op = this.$route.name;
    return {
      default_op: [default_op]
    };
  },
  computed: {
    active() {
      return this.$route.name;
    },
    menus() {
      return this.$config("index", "menus");
    }
  },
  methods: {
    selected(router) {
      if (router != this.$route.name) {
        this.$router.push({ name: router });
      }
    },
    full(isFull) {
      if(isFull){
        this.fullscreen()
      }
    },
    fullscreen() {
      var el = document.documentElement;
      var rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullScreen;

      //typeof rfs != "undefined" && rfs
      if (rfs) {
        rfs.call(el);
      } else if (typeof window.ActiveXObject !== "undefined") {
        //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    }
  }
};
</script>
<style lang="sass" scoped>
@import "@/styles/main/slide-menu.scss"
</style>

